import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import i18n from '@I18N';
import style from './TopicCard.module.scss'
interface Props {
  title: string,
  content: string,
  containerClass?: string,
  onClickViewDetail: () => void
}

const TopicCard: React.FC<Props> = ({
  title, content, onClickViewDetail, containerClass
}) => {
  const onClick = () => {
    onClickViewDetail?.()
  }
  return (
    <View className={`${style.card} ${containerClass}`}>
      <View className={style.titleContainer}>
        <Image className={style.titleIcon} src={Images.globalSearch.special_title_icon} />
        <Text className={style.displayName}>{title}</Text>
      </View>
      <View className={style.line} />
      <Text className={style.description}>{content}</Text>
      <View className={style.viewMoreContainer} onClick={onClick}>
        <Text className={style.viewMoreText}>{i18n.message.view_detail()}</Text>
      </View>
    </View>
  )
}

export default TopicCard
